import Base from "../base.js";
import StudentsApi from "../../api/students.js";
import Students from "./students.js";

export default class extends Base {
    constructor(props) {
        super(props)
        this.data = StudentsApi.getInfo("updateInfo");
    }
    handle() {
        this.$updatebtn.on("click", async e => {
            const data = await StudentsApi.update(this.data);
            if (data.ok) {
                alert("修改成功！");
                location.hash = "#/info/student";
            } else {
                alert("修改失败！")
            }
        });
        this.$input.on("input", async e => {
            const ele = $(e.target);
            // console.log(ele);
            const key = ele.attr("name");
            this.data[key] = ele.val();
        });
    }
    render() {

        this.$el.html(`
        <table border="1" class="stuinfo">
            <tbody>
                <tr>
                    <th>姓名</th>
                    <th><input type="text" name="name" value="${this.data.name}"></th>
                </tr>
                <tr>
                    <th>年龄</th>
                    <th><input type="text" name="age" value="${this.data.age}"></th>
                </tr>
                <tr>
                    <th>性别</th>
                    <th><input type="text" name="sex" value="${this.data.sex}"></th>
                </tr>
                <tr>
                    <th>班级</th>
                    <th><input type="text" name="classId" value="${this.data.classId.name}"></th>
                </tr>
                <tr>
                    <th>电话</th>
                    <th><input type="text" name="tel" value="${this.data.tel}"></th>
                </tr>
                <tr>
                    <th>邮箱</th>
                    <th><input type="text" name="email" value="${this.data.email}"></th>
                </tr>
                <tr>
                    <th>家庭地址</th>
                    <th><input type="text" name="city" value="${this.data.city}"></th>
                </tr>
            </tbody>
        </table>
        <div>
            <button class="update-btn">更新</button>
        </div>
        `);
        this.$input = $(".stuinfo input");
        this.$updatebtn = $(".update-btn");
    }
}